<template>

  <el-card class="h-full">
    <div slot="header" class="flex-x items-center">
      <h3> {{ !sectionDetail.fileUrl ? '当前章节' : '当前内容' }}： {{ sectionDetail.sectionName ? sectionDetail.sectionName :
        '无' }}</h3>

        <div v-if="sectionDetail.fileUrl" class="flex-x gap-2 ml-4">
          <el-button v-if="sectionDetail.fileType === 'md'" plain type="primary" size="mini" icon="el-icon-edit" @click="sendEvent('edit')"> 编辑 </el-button>
          <el-button v-else plain type="primary" size="mini" icon="el-icon-edit" @click="sendEvent('edit')"> 重新上传 </el-button>
        </div>
    </div>

    <!-- 未选择section -->
    <div v-if="!sectionDetail.id">
      <el-empty description="请选择章节"></el-empty>
    </div>

    <!-- 内容节点 -->
    <div v-else-if="showContent" v-loading="loading">
      <div v-if="sectionDetail.previewStatus === 'pending'">
        <el-empty description="预览内容生成中"></el-empty>
      </div>
      <div v-else>
        <PPTPreview v-if="sectionDetail.fileType === 'ppt'" :previewImageList="sectionDetail.previewImageList" />
        <MdPreview v-else-if="sectionDetail.fileType === 'md'" :content="sectionDetail.previewContent" />
        <div v-else-if="sectionDetail.fileType === 'image'" class="flex-x flex-center">
          <el-card>
            <el-image :src="sectionDetail.fileUrl" alt="preview image" />
          </el-card>
        </div>
        <div v-else-if="sectionDetail.fileType === 'video'" class="flex-x flex-center">
          <video :src="sectionDetail.fileUrl" controls style="max-height: 540px;"></video>
        </div>
        <div v-else class="flex-x">
          <span>文件名：</span>
          <span>{{ sectionDetail.fileName }}</span>
        </div>
      </div>
    </div>

    <!-- 目录节点 -->
    <div v-else>
      <div class="flex-x gap-2 flex-center" style="margin-top: 120px;">
        <el-button plain type="primary" size="small" @click="sendEvent('uploadFile')">
          <div class="flex-y gap-1">
            <i class="el-icon-upload font-20"></i>
            <span>上传文件</span>
          </div>
        </el-button>
        <el-button plain type="primary" size="small" @click="sendEvent('addMd')" >
          <div class="flex-y gap-1">
            <i class="el-icon-document font-20"></i>
            <span>添加md文档</span>
          </div>
        </el-button>
        <el-button plain type="primary" size="small" @click="sendEvent('addExam')">
          <div class="flex-y gap-1">
            <i class="el-icon-edit font-20"></i>
            <span>添加题单</span>
          </div>
        </el-button>
      </div>
    </div>
  </el-card>

</template>

<script>
import api from "@/common/api.js";
import PPTPreview from './preview/PPTPreview.vue'
import MdPreview from './preview/MdPreview.vue'

export default {
  name: 'SectionPreview',
  components: {
    PPTPreview,
    MdPreview
  },
  props: {
    section: {
      type: Object,
      required: false,
      default: () => {
      }
    }
  },
  emits: ['uploadFile', 'addMd', 'addExam', 'edit'],
  watch: {
    section: {
      immediate: true,
      handler(newVal, oldVal) {
        this.getSectionDetail(newVal)
      }
    }
  },
  data() {
    return {
      loading: false,
      sectionDetail: {}
    }
  },
  computed: {
    showContent() {
      return this.section && this.section.fileUrl
    }
  },
  methods: {
    async getSectionDetail(section) {
      if (section.fileType === 'ppt' || section.fileType === 'md') {
        try {
          this.loading = true
          const { data } = await api.admin_getCourseSectionDetail(this.section.id)
          this.sectionDetail = data.data
        } finally {
          this.loading = false
        }
      } else {
        this.sectionDetail = Object.assign({}, section)
      }
    },
    handleDelete() {
      console.log('delete')
    },
    handleDownload() {
      console.log('download')
    },
    sendEvent(type) {
      this.$emit(type, this.sectionDetail)
    }
  }
}
</script>

<style scoped>
:deep(.el-card__body) {
  height: 100%;
}
:deep(.el-card__header) {
  display: flex;  
  padding: 0 16px !important;
}
</style>

